<template>
	<view class="pageview flex flex-direction">
		<view class="notice u-flex u-flex-y-center" v-if="createDocterId">
			<image class="icon" src="/static/group/notice.png" mode="widthFix"></image>
			<view>该团队将于{{ tomorrow }} 02:00:00 自动解散</view>
		</view>
		<view class="flex-sub main">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption"
				@down="downCallback" :up="upOption" @up="upCallback">
				<view class="list">
					<u-swipe-action>
						<u-swipe-action-item @click="delMembers" :options="options" v-for="(item, index) in groupList"
							:key="item.groupid" :name="JSON.stringify(item)"
							:disabled="createDocterId != doctorId ||createDocterId==item.menberDocterId">
							<view class="swipe-action item">
								<view class="swipe-action__content">
									<view class="flex align-center u-flex-between">
										<view class="imgbox">
											<image v-if="item.photoPath" :src="filterUrl + item.photoPath.split(';')[0]"
												mode="widthFix"></image>
											<image v-else src="/static/avatar/doctor.png" mode="widthFix"></image>
											<view class="labels" v-if="item.createDocterId == item.menberDocterId">
												<view class="name">团队长</view>
												<image class="img" src="/static/group/labelBg.png" mode="widthFix">
												</image>
											</view>
										</view>
										<view class="flex-sub">
											<view class="name flex u-flex-y-center">
												<text>{{ item.menberDocterName }}</text>
												<view class="label" v-if="item.position">
													<image src="/static/group/icon.png" class="icon" mode="widthFix">
													</image>
													<text>{{ item.position || '' }}</text>
												</view>
											</view>
											<view class="phone">
												联系方式:
												<text class="number">{{ item.phone }}</text>
											</view>
										</view>
										<!-- <image src="/static/group/arraw.png" class="arrow" mode="widthFix"></image> -->
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</mescroll-uni>
		</view>
		<view class="footerbar">
			<button class="inviteBtn" open-type="share" @click="invite" v-if="createDocterId==doctorId">邀请医护加入</button>
			<u-button type="primary" :loading="loading" text="创建我的团队" shape="circle" @click="createGroup"
				v-else></u-button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// 获取明天
	function getTomorrowDate(date) {
		const today = date ? new Date(date) : new Date();
		const tomorrow = new Date(today);
		tomorrow.setDate(today.getDate() + 1);

		const year = tomorrow.getFullYear();
		const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
		const day = String(tomorrow.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;
	}
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: true // 不自动加载
				},
				upOption: {
					auto: true // 不自动加载
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(245, 108, 108)'
					}
				}],
				groupList: [],
				isInit: false,
				teamleaderInfo: {},
				loading: false,
				// 获取明天日期
				tomorrow: getTomorrowDate(),
				createDocterId: ''
			};
		},
		computed: {
			...mapState(['userInfo', 'doctorId'])
		},
		onShareAppMessage(res) {
			const shareParams = {
				title: `邀请你加入我的团队`,
				//imageUrl: '/static/logo.png',
				path: `/pages/group/invite?groupInfo=${JSON.stringify(this.teamleaderInfo)}`
			};
			return shareParams;
		},
		onShow() {
			this.isInit && this.mescroll && this.mescroll.resetUpScroll();
			this.isInit = true;
		},
		methods: {
			...mapMutations(['$uStore']),
			upCallback() {
				this.getGroup();
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			getGroup() {
				console.log('个人信息' + JSON.stringify(this.userInfo));
				this.$postAction(this.$groupapi.getGroup).then(da => {
					console.log('数据' + JSON.stringify(da));
					this.groupList = da||[];
					if (da && da.length > 0) {
						this.teamleaderInfo = da.find(item => item.createDocterId == item.menberDocterId);
						this.tomorrow = getTomorrowDate(this.teamleaderInfo.createTime);
						this.createDocterId = this.teamleaderInfo.createDocterId;
					}
					this.mescroll.endSuccess(this.groupList.length, false);
				});
			},
			/* 创建团队 */
			createGroup() {
				this.loading = true;
				this.$postAction(this.$groupapi.createGroup).then(da => {
					this.loading = false;
					this.downCallback();
				});
			},
			delMembers(info) {
				console.log('info', JSON.stringify(info));
				let data = JSON.parse(info.name);
				let params = {
					menberDocterId: data.menberDocterId,
					groupid: data.groupid
				};
				console.log(params);
				this.$postAction(this.$groupapi.delGroup, params).then(da => {
					this.mescroll.resetUpScroll();
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	page,
	.pageview {
		height: 100%;
		width: 100%;
		background: #f7f7fc;
		box-sizing: border-box;

		.main {
			min-height: 0;
			overflow: auto;
		}
	}

	.notice {
		height: 90upx;
		background: #e2fff8;
		padding: 0 24upx;
		color: #49b9ad;
		font-size: 28upx;

		.icon {
			width: 40upx;
			height: 40upx;
			margin-right: 20upx;
		}
	}

	.list {
		padding: 20upx;

		/deep/ .u-swipe-action-item {
			background: #fff;
			//box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
			//margin-bottom: 20upx;
			//border-radius: 20upx;
		}

		.item {
			padding: 20upx 30upx;
			color: #666;

			.name {
				color: #1c2023;
				font-size: 32upx;
				margin-bottom: 20upx;
			}

			.label {
				background: linear-gradient(101deg, #71d4c9 31%, #48b6aa 83%);
				color: #fff;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx;
				padding: 0 22upx 0 70upx;
				margin-left: 20upx;
				position: relative;
				font-size: 30upx;

				.icon {
					width: 72upx;
					height: 72upx;
					z-index: 9;
					position: absolute;
					left: -10upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.phone {
				color: #606972;
				font-size: 24upx;

				.number {
					color: #f65755;
					margin-left: 20upx;
				}
			}

			.arrow {
				width: 12upx;
				height: 20upx;
			}

			.imgbox {
				width: 202upx;
				height: 202upx;
				overflow: hidden;
				margin-right: 20upx;
				border-radius: 20upx;
				position: relative;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}

				.labels {
					position: absolute;
					top: 0;
					left: 0;
					width: 118upx;
					height: 40upx;

					.img {
						display: block;
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}

					.name {
						color: #fff;
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						font-size: 20upx;
						z-index: 2;
						line-height: 40upx;
						width: 6em;
						text-align: center;
					}
				}
			}
		}
	}

	/deep/.footerbar {
		padding: 30upx 40upx;
		background: #fff;

		.shareBtn {
			background-color: #49b9ad;
			border-radius: 100upx;
			color: #fff;
			padding: 0 24upx;
			font-size: 34rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}

		.inviteBtn {
			background-color: #e2fff8;
			border-radius: 100upx;
			color: #49b9ad;
			border: 1px solid #e2fff8;
			padding: 0 24upx;
			font-size: 34rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;

			&::after {
				border: none;
			}
		}
	}
</style>